<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    width="600px"
    custom-class="mydialog"
    append-to-body
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-row :gutter="10">
        <el-col :span="10" :offset="10">
          <el-input
            v-model="searchKey"
            placeholder="输入关键词"
            class="s-input"
            prefix-icon="el-icon-search"
          />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getlist()">搜索</el-button>
        </el-col>
      </el-row>
      <div class="block pt-30">
        <el-timeline>
          <div v-for="(item,index) in tableData" :key="index">
            <el-timeline-item timestamp placement="top">
              {{ item.operateDatetime |parseTime('{y}-{m}-{d} {hh}:{mm}:{ss}') }}
              <el-card>
                <h4>{{ item.newStatusName }} (操作人:{{ item.operatorName }})</h4>
                <p>备注:{{ item.remark }}</p>
              </el-card>
            </el-timeline-item>
          </div>
        </el-timeline>
      </div>
    </div>
  </el-dialog>
</template>
<script>
// import { parseTime } from '@/utils'
import { getPurchasesHistory } from '@/api/pas/purchase'
export default {
  props: {
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '采购单操作记录',
        show: true
      },
      form: {
        type_options: [],
        type: '',
        number: ''
      },
      rules: {},
      tableData: [],
      searchKey: '',
      search: {
        purchaseId: '',
        keyword: ''
      }
    }
  },
  mounted() {
    // 采购单ID
    this.getlist()
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getlist() {
      this.search.purchaseId = this.modalData.purchaseId
      this.search.keyword = this.searchKey
      getPurchasesHistory(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            this.tableData = response.data.data.list
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
